<template>
  <div class="app-container">
    <div class="search themm-black">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="90px">
        <el-form-item prop="textTitle">
          <el-input style="width: 540px;margin-bottom: 20px;height: 32px;" v-model="queryParams.textTitle"
            placeholder="请输入搜索内容" clearable @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" class="primary-btn" size="mini"
            @click="handleQuery">查询</el-button>
          <el-button icon="el-icon-refresh" class="reset-btn" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
        <el-row>
          <el-form-item label="数据来源：" prop="publisher">
            <el-select clearable v-model="queryParams.publisher" placeholder="请选择数据来源" style="width: 240px;">
              <el-option v-for="item in publisherOptions" :key="item" :label="item" :value="item" />
            </el-select>
          </el-form-item>
        </el-row>
        <el-row style="margin-top: 10px;">
          <el-form-item label="上传时间：">
            <el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
              range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
          </el-form-item>
        </el-row>
      </el-form>
    </div>
    <div class="tab-list">
      <div class="tab-item" :class="item.value == curTab ? 'active' : ''" v-for="(item, index) in tabList"
        @click="handleTab(item.value)">
        {{ item.name }}
      </div>
      <div class="right-btn">
        <span class="btn-item" :class="tabIndex == item.value ? 'actives' : ''" v-for="(item, index) in tabIndexList"
          @click="handleTabIndex(item.value)">{{ item.name }}</span>
      </div>
    </div>
    <div class="retrieve-list" v-loading="loading">
      <div class="retrieve-item" v-for="(item, index) in retrieveList">
        <!-- <div class="title ellipsis">{{ item.title }}</div> -->
        <el-tooltip class="item" :disabled="item.title.length < 17" :content="item.title" placement="top">
          <div class="title ellipsis">{{ item.title }}</div>
        </el-tooltip>
        <img v-if="item.type === 'img'" :src="item.preViewUrl" alt="" style="object-fit: contain;">
        <!-- <video  :src="item.preViewUrl"></video> -->
        <div v-if="item.type === 'video'">
          <vue-d-player ref="dplayer" class="vd-player" :options="{ video: { url: item.preViewUrl, pic: item.coverUrl } }"
            :key="item.id"></vue-d-player>
        </div>
        <div class="material-desc" v-if="item.type === 'text'">
          {{ item.textContent }}
        </div>
        <div class="tag-list">
          <span class="tag-item" v-for="(tag, index) in item.labels">{{ tag }}</span>
        </div>
        <div class="up-time">上传时间：{{ parseTime(new Date(item.publishDatetime), '{y}-{m}-{d}') }} <span class="ml10" v-if="item.type === 'video'">时长: {{ item.formatDuration || '--' }}</span></div>
        <div class="item-btn">
          <div class="btn" v-if="item.type !== 'video'" @click="handlePreview(item)">预览</div>
          <div class="btn line" v-if="item.type === 'img'" @click="handleEdit(item)">编辑</div>
          <div class="btn" @click="handleDel(item)">删除</div>
        </div>
      </div>
    </div>
    <div class="pagination">
      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" />
    </div>
    <!-- 预览组件 -->
    <Preview ref="preview" />
  </div>
</template>

<script>

import {
  getImageList,
  delImage,
  getVideoList,
  delVideo,
  getTextList,
  delText,
  queryVideoPubOptions,
  queryTextPubOptions,
  queryImagePubOptions
} from "@/api/material/material";
import Preview from "./components/Preview";
export default {
  name: "Engine",
  components: {
    Preview,
  },
  data () {
    return {
      loading: true,
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        textTitle: null,
        title: null,
        publisher: null,
        startPublishTime: null,
        endPublishTime: null
      },
      tabList: [
        {
          name: '图片',
          value: 1,
        },
        {
          name: '视频',
          value: 2,
        },
        {
          name: '文本',
          value: 3,
        }
      ],
      tabIndex: 'private',
      tabIndexList: [
        {
          name: '• 个人',
          value: 'private',
        },
        {
          name: '• 公共',
          value: 'public',
        },
      ],
      curTab: 1,
      imagesList: [],
      videoList: [],
      textList: [],
      retrieveList: [],
      dateRange: [],
      publisher: null, // 数据来源：
      imagePubOptions: [],
      videoPubOptions: [],
      textPubOptions: [],
    };
  },
  computed: {
    userId () {
      return this.$store.getters.userId;
    },
    // 数据来源根据不同类别获取不同数据
    publisherOptions () {
      if (this.curTab == 1) {
        return this.imagePubOptions
      } else if (this.curTab == 2) {
        return this.videoPubOptions
      } else {
        return this.textPubOptions
      }
    }
  },
  created () {
    this.queryParams.user = this.userId
    this.getImageList();
    this.queryImagePubOptions();
    this.queryVideoPubOptions();
    this.queryTextPubOptions();
  },
  methods: {
    // 分页加载素材列表
    getList () {
      if (this.curTab === 1) {
        this.getImageList()
      } else if (this.curTab === 2) {
        this.getVideoList()
      } else {
        this.getTextList();
      }
    },

    // 取消按钮
    cancel () {
      this.open = false;
    },
    // 预览
    handlePreview (detail) {
      this.$refs.preview.show(detail)
    },
    /** 搜索按钮操作 */
    handleQuery () {
      this.queryParams.pageNum = 1;
      this.queryParams.title = this.queryParams.textTitle; // 图片,视频需要传title, 文本需要传textTitle,所以为了统一两个字段都传
      if(this.dateRange && this.dateRange.length > 0) {
        this.queryParams.startPublishTime = this.dateRange[0];
        this.queryParams.endPublishTime = this.dateRange[1];
      } else {
        this.queryParams.startPublishTime = null;
        this.queryParams.endPublishTime = null;
      }
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery () {
      this.dateRange = [];
      this.queryParams.title = null;
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // tab切换
    handleTab (e) {
      console.log(e)
      this.curTab = e
      this.queryParams.pageNum = 1;
      this.queryParams.publisher = null;
      this.retrieveList = []
      if (e === 1) {
        this.getImageList()
      } else if (e === 2) {
        this.getVideoList()
      } else {
        this.getTextList()
      }
    },
    // 切换个人公共
    handleTabIndex (tabIndex) {
      console.log(tabIndex)
      this.tabIndex = tabIndex
      if (tabIndex === 'private') {
        this.queryParams.user = this.userId
      } else {
        this.queryParams.user = ''
      }
      if (this.curTab === 1) {
        this.getImageList()
      } else if (this.curTab === 2) {
        this.getVideoList()
      } else {
        this.getTextList()
      }
    },
    // 获取图片素材
    getImageList () {
      this.loading = true;
      getImageList(this.queryParams).then(response => {
        this.retrieveList = response.rows.map(res => {
          res.type = 'img'
          return res
        });
        this.total = response.total;
      }).finally(() => {
        this.loading = false;
      });
    },
    // 获取视频素材
    getVideoList () {
      this.loading = true;
      getVideoList(this.queryParams).then(response => {
        this.retrieveList = response.rows.map(res => {
          res.type = 'video'
          return res
        });
        this.total = response.total;
      }).finally(() => {
        this.loading = false;
      });
    },
    // 获取文本素材
    getTextList () {
      this.loading = true;
      getTextList(this.queryParams).then(response => {
        this.retrieveList = response.rows.map(res => {
          res.title = res.textTitle
          res.type = 'text'
          return res
        });
        this.total = response.total;
      }).finally(() => {
        this.loading = false;
      });
    },
    // 删除素材
    handleDel (item) {
      console.log(item)
      const ids = item.id || this.ids;
      const apiType = {
        'img': delImage,
        'video': delVideo,
        'text': delText
      }
      console.log(apiType[item.type])
      this.$modal.confirm('是否确认删除素材').then(function () {
        return apiType[item.type](ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => { });
    },
    handleEdit (row) {
      console.log(row)
      this.$router.push({
        path: '/content/imgMake',
        query: {
          id: row.id,
          type: 1,
        }
      })
    },
    // 获取文本的数据来源
    queryTextPubOptions () {
      queryTextPubOptions().then(res => {
        this.textPubOptions = res
      }).catch(err => {
        this.textPubOptions = []
      })
    },
    // 获取图片的数据来源
    queryImagePubOptions () {
      queryImagePubOptions().then(res => {
        this.imagePubOptions = res
      }).catch(err => {
        this.imagePubOptions = []
      })
    },
    // 获取视频的数据来源
    queryVideoPubOptions () {
      queryVideoPubOptions().then(res => {
        this.videoPubOptions = res
      }).catch(err => {
        this.videoPubOptions = []
      })
    }
  }
};
</script>
<style lang="scss" scoped>
.app-container {
  padding: 0;
}

.search {
  color: rgba(255, 255, 255, .6);
  margin-bottom: 20px;
  font-size: 14px;
  padding: 20px 30px;
  border-bottom: 10px solid rgba(255, 255, 255, .1);
}

.com-table {
  padding: 20px;
}

.retrieve-list {
  padding: 20px;
  color: #fff;
  display: flex;
  flex-flow: wrap;

  // margin: 0 -10px;
  .retrieve-item {
    position: relative;
    width: calc(20% - 20px);
    // height: 325px;
    margin: 0 10px 20px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, .1);
    padding: 15px;
    border-radius: 6px;

    .title {
      margin-bottom: 15px;
    }

    img {
      width: 100%;
      height: 160px;
    }

    video {
      width: 100%;
      height: 160px;
    }
    // .vd-player::v-deep .dplayer-video-wraper {
    //   display: flex;
    //   justify-content: center;
    //   align-items: center;
    // }
    // .vd-player::v-deep .dplayer-video-wraper > .dplayer-video {
    //   max-height: 200px;

    // }

    .tag-list {
      margin: 10px 0;
      font-size: 12px;

      .tag-item {
        color: #09B844;
        background: rgba(9, 184, 68, .2);
        padding: 3px 10px;
        margin-right: 10px;
      }

      .tag-item:last-child {
        background: rgba(0, 87, 255, 0.08);
        color: #0057FF;
      }
    }

    .up-time {
      font-size: 12px;
      margin-bottom: 40px;
    }

    .item-btn {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: #0057FF;
      padding: 10px;
      border-radius: 0 0 8px 8px;

      .btn {
        flex: 1;
        text-align: center;
        cursor: pointer;
      }

      .line {
        border-left: 1px solid rgba(255, 255, 255, .4);
        border-right: 1px solid rgba(255, 255, 255, .4);
      }
    }
  }
}

.material-desc {
  font-size: 12px;
  color: rgba(255, 255, 255, .8);
  line-height: 20px;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  /*这里是超出几行省略*/
  overflow: hidden;
  cursor: pointer;
}

.tab-list {
  display: flex;
  margin: 0 32px;

  .tab-item {
    width: 80px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    margin-right: 16px;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    cursor: pointer;
  }

  .active {
    background-color: rgba(0, 87, 255, 1);

    border-radius: 4px;
  }

  .right-btn {
    flex: 1;
    text-align: right;
    color: rgba(255, 255, 255, .6);

    .btn-item {
      margin-left: 40px;
      cursor: pointer;
    }

    .btn-item.actives {
      color: rgba(0, 87, 255, 1);
      border-bottom: 1px solid rgba(0, 87, 255, 1);
      padding-bottom: 10px;
    }
  }
}

.sourse {
  margin-bottom: 15px;
}

.sourse-item {
  color: #fff;
  margin-right: 10px;
  cursor: pointer;
}

::v-deep .el-form-item--small.el-form-item {
  margin-bottom: 0;
}
.vd-player {
  max-height: 200px;
}
</style>
